<template>
  <div class="mt-4">
    <a-collapse default-active-key="1">
      <a-collapse-panel key="1" :header="t('公共配置')">
        <div class="grid grid-cols-2 gap-2">
          <a-input-number v-model:value="currentShape.x" :min="0">
            <template #addonAfter>
              <span>X</span>
            </template>
          </a-input-number>
          <a-input-number v-model:value="currentShape.y" :min="0">
            <template #addonAfter>
              <span>Y</span>
            </template>
          </a-input-number>

          <a-input-number v-model:value="currentShape.w" :min="0">
            <template #addonAfter>
              <span>W</span>
            </template>
          </a-input-number>
          <a-input-number v-model:value="currentShape.h" :min="0">
            <template #addonAfter>
              <span>H</span>
            </template>
          </a-input-number>
          <div>
            <a-input-number v-model:value="currentShape.z">
              <template #addonAfter>
                <span>Z</span>
              </template>
            </a-input-number>
          </div>
        </div>

        <div class="mt-4">
          <a-checkbox v-model:checked="currentShape.lockAspectRatio">
            <span class="text-nowrap">{{ t('宽高比') }}</span>
          </a-checkbox>
          <a-checkbox v-model:checked="currentShape.lock">
            <span>{{ t('禁用') }}</span>
          </a-checkbox>
          <a-checkbox v-model:checked="currentShape.resizable">
            <span>{{ t('缩放') }}</span>
          </a-checkbox>
          <a-checkbox v-model:checked="currentShape.draggable">
            <span>{{ t('拖拽') }}</span>
          </a-checkbox>
          <a-checkbox v-model:checked="currentShape.hasBorder">
            <span>{{ t('边框') }}</span>
          </a-checkbox>
          <!-- <a-checkbox  v-model:checked="currentShape.parent">
        <span >出界</span>
      </a-checkbox> -->
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { currentShape } from '../../../data/shapes';

const { t } = useI18n();
</script>

<style lang="scss" scoped>
.check-box {
  width: 50%;
  flex-basis: 50%;
}
</style>
